<template>
  <div class='container'>
    <el-card>
      <!-- -------------头部------------------ -->
      <el-form label-width="100px">
        <el-form-item label="学科名称">
           <el-input style="width:200px;margin-right:10px" size="small" v-model="iptName"></el-input>
           <el-button size="small" @click="iptName='' ">清除</el-button>
          <el-button  size="small" type="primary" @click="filterSubject">搜索</el-button>
          <el-button size="small" type="success" icon="el-icon-edit" style="float:right" @click="dialogVisible=true">新增学科</el-button>
        </el-form-item>
      </el-form>
      <!------------------- 警示框-------------------- -->
        <el-alert
              :title=" '数据一共' + counts + '条' "
              type="info"
              :closable="false"
              show-icon>
        </el-alert>
      <!-- --------------------列表区域---------------- -->
        <el-table
              v-loading="loading"
              :data="tableList"
              stripe
              style="width: 100%">
              <el-table-column
                type="index"
                :index="indexMethod"
                label="序号"
                width="60">
              </el-table-column>
              <el-table-column
                prop="subjectName"
                label="学科名称"
                width="160">
              </el-table-column>
              <el-table-column
                prop="username"
                label="创建者"
                width="120px"
                >
              </el-table-column>
              <el-table-column
                label="创建日期"
                width="200px"
                >
                <template #default="{row}">
                  {{row.addDate | formatTimeDayjs('YYYY-MM-DD  HH:mm:ss')}}
                </template>
              </el-table-column>
              <el-table-column
                label="前台是否显示"
                width="120"
                >
         <template #default="{row}">
             {{row.isFrontDisplay=== 1 ? '是' : '否'}}
                </template>
              </el-table-column>
              <el-table-column
                prop="twoLevelDirectory"
                label="二级目录">
              </el-table-column>
              <el-table-column
                prop="tags"
                label="标签">
              </el-table-column>
              <el-table-column
                prop="totals"
                label="题目数量"
                width="100"
                >
              </el-table-column>
              <el-table-column
                label="操作"
                width="280"
                >
                <template #default="{row}">
                <el-button type="text" @click="jumpCatalogue(row)">学科分类</el-button>
                <el-button type="text" @click="jumpTags(row)">学科标签</el-button>
                <el-button type="text" @click="editSub(row)">
                  修改
                 </el-button>
                <el-button type="text" @click="delSubject(row)">删除</el-button>
           </template>
              </el-table-column>
         </el-table>

         <!-- 弹框 -->
         <el-dialog
            v-loading="showDialog"
            @close="closeDialog"
            :title="showTitle"
            :visible="dialogVisible"
            width="30%" >

         <el-form label-width="90px" :model="form" :rules="rules" ref="form">
           <el-form-item label="学科名称" prop="subjectName">
             <el-input placeholder="请输入学科名称" size="small" v-model="form.subjectName"></el-input>
            </el-form-item>
              <el-form-item label="是否显示">
              <el-switch  active-color="#13ce66" inactive-color="#999" active-value="1" inactive-value="0" v-model="isFrontDisplay">
              </el-switch>
            </el-form-item>
              </el-form>
            <span slot="footer" class="dialog-footer" center>
              <el-button @click=closeDialog>取 消</el-button>
              <el-button type="primary" @click="submitClick">确 定</el-button>
            </span>
        </el-dialog>
      <!-- ------------------分页器----------------- -->
      <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[2, 4, 6, 8,10,12,14]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts">
    </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { list, add, detail, update, remove } from '@/api/hmmm/subjects.js'

export default {
  name: 'Subjects',
  data () {
    return {
      showDialog: false,
      tableList: [],
      pagesize: 10,
      page: 1,
      counts: 0,
      pages: 0,
      iptName: '',
      // subName: '',
      loading: false,
      dialogVisible: false,
      isFrontDisplay: null,
      form: {
        id: '',
        subjectName: ''
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: ['blur', 'trigger'] }
        ]
      }
    }
  },
  created () {
    this.getSubjects()
  },
  computed: {
    showTitle () {
      return this.form.id ? '修改学科' : '新增学科'
    }
  },
  methods: {
    // 获取学科列表数据
    async getSubjects () {
      this.loading = true
      const obj = {
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.iptName
      }

      const res = await list(obj)
      // console.log(res)

      this.page = +res.data.page
      this.pagesize = +res.data.pagesize
      this.counts = res.data.counts
      this.pages = res.data.pages
      this.tableList = res.data.items
      this.loading = false
    },
    // 序号
    indexMethod (index) {
      return index + 1 + this.pagesize * (this.page - 1)
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.page = 1
      this.getSubjects()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getSubjects()
    },
    // 筛选功能
    filterSubject () {
      this.getSubjects({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.iptName
      })
    },
    // 关弹框
    closeDialog () {
      this.dialogVisible = false
      this.$refs.form.resetFields()
      this.form = {}
    },
    // 修改学科
    async editSub (data) {
      this.dialogVisible = true
      this.showDialog = true // loading效果

      const res = await detail(data)
      // console.log(res)
      this.isFrontDisplay = '' + res.data.isFrontDisplay
      this.form = res.data
      this.showDialog = false
    },
    // 新增/修改的提交
    submitClick () {
      this.$refs.form.validate(async (flag) => {
        if (!flag) return false

        // 有id即是修改
        if (this.form.id) {
          await update({
            ...this.form,
            isFrontDisplay: this.isFrontDisplay
          })
          // console.log(res)
          this.$message.success('修改学科成功')
        } else {
          // 无id即是新增
          await add({
            subjectName: this.form.subjectName,
            isFrontDisplay: this.value
          })
          this.$message.success('新增学科成功')
        }

        this.getSubjects()
        this.closeDialog()
      })
    },
    // 删除
    delSubject (data) {
      if (this.tableList.length === 1 && this.page > 1) {
        this.page--
      }
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data)
        this.getSubjects()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    jumpCatalogue (row) {
      this.$router.push({
        name: 'subjects-directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    jumpTags (row) {
      this.$router.push({
        name: 'subjects-tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    }

  }
}
</script>

<style scoped lang='scss'>
  .container {
    .pagination{
      float: right;
    }
  }
</style>
